<style lang="less" scoped>
	// @import '../assets/less/pirates/piratesContent.less';
	.pirates {
		background-color: rgb(129, 193, 203) !important;
	position: absolute;
	color: #000000;
	text-align: center;
	z-index: 10;
	background: rgba(0, 0, 0, 0.1);
	height: 600px;
	width: 60%;
	top: 50%;
	left: 50%;
	margin-top: -300px;
	margin-left: -30%;

	.animation-font {
		position: relative;
		height: 45px;
		width: 75%;
		min-width: 570px;
		margin: 25px auto;
		overflow: hidden;
		font-size: 45px;
		line-height: 45px;
		color: #ecf0f1;
		text-align: center;
		.container {
			font-weight: 600;
			overflow: hidden;
			height: 45px;
			padding: 0 45px;
			&:before {
				content: '[';
				left: 0;
			}
			&:after {
				content: ']';
				position: absolute;
				right: 0;
			}
			&:after, &:before {
				position: absolute;
				top: 0;
				color: #16a085;
				font-size: 45px;
				line-height: 45px;
				animation-name: opacity;
				animation-duration: 2s;
				animation-iteration-count: infinite;
			}
			.text {
				color: #444242;
				display: inline;
				// float: left;
				margin: 0;
			}
		}
	
	}

	.pirates-img {
		width: 70%;
		margin: 0 auto 30px;
		height: 400px;
		img {
			border: 1px solid #fff;
			padding: 1%;
			width: 100%;
			height: 100%;
			transition: background-color 0.2s, border-color 0.2s;

			&:hover {
				background-color: rgba(255, 255, 255, 0.2);
				border-color: rgba(255, 255, 255, 0.2);
			}
		}
	}

	.pirates-btn {
		display: inline-block;
		color: rgba(94, 90, 90, 0.7);
		background-color: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 0.3rem;
		transition: color 0.2s, background-color 0.2s, border-color 0.2s;
		padding: 15px 40px;
		margin: 0 10px;

		&:hover {
			text-decoration: none;
			color: rgba(255, 255, 255, 0.8);
			background-color: rgba(77, 174, 95, 0.942);
			border-color: rgba(255, 255, 255, 0.3);
		}
	}
}

</style>

<template>
	<div class="pirates">
		<div class="animation-font">
			<div class="container">
				<p class="text">
					大美宋朝
				</p>
				<!-- <ul class="list">
					<li class="item" v-for="list in lists">{{list.name}}</li>
				</ul> -->
			</div>
		</div>
		<div class="pirates-img">
			<img :src="img.src" :alt="img.alt" />
		</div>
		<router-link to="/" class="pirates-btn">Go Back</router-link>
	</div>
</template>

<script>
	export default {
		name: 'pirates',
		data() {
			return {
				img: {
					src: 'https://pic.baike.soso.com/ugc/baikepic2/4507/cut-20210220155032-2054941743_jpg_585_468_66342.jpg/300',
					alt: 'Straw Hat Pirate'
				}
			}
		}
	}
</script>
